M

MLOG

Latviešu

Uzziniet, kā izmantot Next.js izkārtojumus, lai veidotu robustas, mērogojamas un globāli orientētas lietotnes. Atklājiet labāko praksi koplietojamām UI komponentēm.

Next.js izkārtojumi: koplietojamu lietotāja saskarnes (UI) komponenšu modeļu apgūšana globālām lietotnēm

Next.js ir kļuvis par modernās tīmekļa izstrādes stūrakmeni, kas pazīstams ar spēju pilnveidot veiktspējīgu un lietotājam draudzīgu lietotņu izveidi. Šīs spējas pamatā ir efektīva UI komponenšu pārvaldība, un tās centrā ir Next.js izkārtojumu spēks. Šī visaptverošā rokasgrāmata iedziļinās Next.js izkārtojumu izmantošanas smalkumos, lai veidotu robustas, mērogojamas un globāli orientētas lietotnes. Mēs izpētīsim labāko praksi, kā veidot koplietojamas UI komponentes, kas veicina koda atkārtotu izmantošanu, uzturamību un nevainojamu lietotāja pieredzi lietotājiem visā pasaulē.

Izkārtojumu nozīmes izpratne Next.js

Tīmekļa izstrādes jomā, īpaši ar tādām ietvariem kā Next.js, izkārtojumi kalpo kā arhitektoniskais pamats, uz kura tiek veidota jūsu lietotnes lietotāja saskarne. Tie ir konsekventu, atkārtoti lietojamu UI elementu projekts, kas veido kopējo lietotāja pieredzi. Pārdomāts izkārtojumu dizains lietotnes struktūrā ļauj izstrādātājiem izvairīties no koda dublēšanas un vienkāršo uzturēšanu. Būtībā tie nodrošina ietvaru:

Next.js izkārtojumu galvenie jēdzieni un priekšrocības

1. Faili `_app.js` un `_document.js`

Next.js divi īpaši faili spēlē kritisku lomu izkārtojumu un globālo konfigurāciju definēšanā: `_app.js` un `_document.js`. To mērķa izpratne ir fundamentāla.

2. Izkārtojumu izmantošanas priekšrocības

Izkārtojumu izmantošana piedāvā neskaitāmas priekšrocības, īpaši veidojot lielas, sarežģītas tīmekļa lietotnes:

Koplietojamu UI komponenšu modeļu ieviešana

1. Pamata izkārtojuma komponentes izveide

Izveidosim vienkāršu izkārtojuma komponenti. Šī komponente ietvers galveni, galvenā satura apgabalu un kājeni. Tā ir paredzēta koplietošanai vairākās lapās.

// komponentes/Layout.js
import Head from 'next/head';

function Layout({ children, title }) {
  return (
    <>
      <Head>
        <title>{title} | Mana Lietotne</title>
        <meta name="description" content="Mana Next.js Lietotne" />
      </Head>
      <header>
        <h1>Manas Lietotnes Galvene</h1>
      </header>
      <main>{children}</main>
      <footer>
        <p>© {new Date().getFullYear()} Mana Lietotne. Visas tiesības aizsargātas.</p>
      </footer>
    </>
  );
}

export default Layout;

Šajā piemērā `Layout` komponente saņem `children` un `title` kā rekvizītus. `children` attēlo lapas saturu, kas tiks renderēts izkārtojumā, savukārt `title` iestata lapas virsraksta tagu SEO vajadzībām.

2. Izkārtojuma komponentes izmantošana lapā

Tagad pielietosim šo izkārtojumu vienai no jūsu lapām (piemēram, `pages/index.js`).

// pages/index.js
import Layout from '../components/Layout';

function HomePage() {
  return (
    <Layout title="Sākums">
      <h2>Laipni lūdzam sākumlapā</h2>
      <p>Šis ir sākumlapas galvenais saturs.</p>
    </Layout>
  );
}

export default HomePage;

`pages/index.js` mēs importējam `Layout` komponenti un ietinam lapas saturu tajā. Mēs arī norādām lapai specifisku `title`. `children` rekvizīts `Layout` komponentē tiks aizpildīts ar saturu, kas atrodas starp `<Layout>` tagiem `index.js`.

3. Paplašinātas izkārtojuma funkcijas

Globāli apsvērumi starptautiskām lietotnēm

Veidojot izkārtojumus globālai auditorijai, ir svarīgi ņemt vērā vairākus internacionalizācijas un globalizācijas (i18n/g11n) aspektus. Šīs prakses nodrošina, ka jūsu lietotne ir pieejama un lietotājam draudzīga personām no dažādām kultūras vidēm.

1. Internacionalizācija (i18n) un lokalizācija (l10n)

2. i18n ieviešana Next.js izkārtojumos

Lai ieviestu i18n Next.js, varat izmantot dažādas bibliotēkas, piemēram, `next-i18next` vai iebūvēto `next/router` risinājumiem, kas balstīti uz maršrutēšanu.

Šeit ir vienkāršots piemērs ar `next-i18next`, izmantojot `_app.js` failu. Tas iestata i18n lietotnes līmenī. Pārliecinieties, ka esat instalējis nepieciešamās pakotnes, izmantojot `npm install i18next react-i18next next-i18next`. Šis piemērs demonstrē vienkāršotu integrāciju un varētu prasīt pielāgojumus atkarībā no konkrētām prasībām.

// _app.js
import { appWithTranslation } from 'next-i18next';
import '../styles/global.css'; // Importējiet savus globālos stilus

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default appWithTranslation(MyApp);

Šajā `_app.js` failā `appWithTranslation` nodrošina internacionalizācijas kontekstu lietotnei.

Tad savā izkārtojumā izmantojiet `useTranslation` āķi, ko nodrošina `react-i18next`:

// komponentes/Layout.js
import { useTranslation } from 'react-i18next';
import Head from 'next/head';

function Layout({ children, title }) {
  const { t } = useTranslation(); // Iegūstiet tulkošanas funkciju

  return (
    <>
      <Head>
        <title>{t('layout.title', { title })}</title>
        <meta name="description" content={t('layout.description')} />
      </Head>
      <header>
        <h1>{t('layout.header')}</h1>
      </header>
      <main>{children}</main>
      <footer>
        <p>{t('layout.footer', { year: new Date().getFullYear() })}</p>
      </footer>
    </>
  );
}

export default Layout;

Tad jums būtu savi tulkošanas faili, kas parasti tiek glabāti `public/locales/[locale]/[namespace].json` struktūrā. Piemēram, `public/locales/en/common.json` varētu saturēt:

{
  "layout": {
    "title": "{{title}} | My App",
    "description": "My Next.js App Description",
    "header": "My App Header",
    "footer": "© {{year}} My App. All rights reserved."
  }
}

Un `public/locales/fr/common.json` (franču valodai) varētu saturēt:

{
  "layout": {
    "title": "{{title}} | Mon Application",
    "description": "Description de mon application Next.js",
    "header": "En-tête de mon application",
    "footer": "© {{year}} Mon application. Tous droits réservés."
  }
}

Piezīme: Šis piemērs sniedz pamata pieeju i18n integrācijai un prasa papildu konfigurāciju (piemēram, valodas noteikšanu, maršrutēšanas iestatīšanu). Lai iegūtu visaptverošus norādījumus, skatiet `next-i18next` dokumentāciju.

3. Adaptīvs dizains un izkārtojumi

Adaptīvs dizains ir kritiski svarīgs globālai auditorijai. Jūsu izkārtojumam jāpielāgojas dažādiem ekrāna izmēriem un ierīcēm. Izmantojiet CSS ietvarus, piemēram, Bootstrap, Tailwind CSS, vai izveidojiet pielāgotus mediju vaicājumus, lai nodrošinātu konsekventu un lietotājam draudzīgu pieredzi visās ierīcēs.

4. Pieejamības apsvērumi

Ievērojiet pieejamības vadlīnijas (WCAG), lai padarītu savu lietotni lietojamu cilvēkiem ar invaliditāti. Tas ietver:

5. Datuma un laika formatēšana

Dažādos reģionos ir atšķirīgas datuma un laika formātu konvencijas. Pārliecinieties, ka datumi un laiki tiek parādīti pareizi, pamatojoties uz lietotāja lokalizāciju. Bibliotēkas, piemēram, `date-fns` vai iebūvētā `Intl` API JavaScript valodā, var to paveikt.

import { format } from 'date-fns';
import { useTranslation } from 'react-i18next';

function MyComponent() {
  const { i18n } = useTranslation();
  const currentDate = new Date();
  const formattedDate = format(currentDate, 'MMMM d, yyyy', { locale: i18n.language });

  return <p>{formattedDate}</p>;
}

6. Valūtas formatēšana

Attēlojiet monetārās vērtības pareizā formātā katrai lokalizācijai. `Intl.NumberFormat` API ir vērtīgs valūtas formatēšanas apstrādei.

function MyComponent() {
  const { i18n } = useTranslation();
  const price = 1234.56;
  const formattedPrice = new Intl.NumberFormat(i18n.language, { // Izmantojiet i18n.language lokalizācijai
    style: 'currency',
    currency: 'USD', // Vai dinamiski nosakiet valūtu, pamatojoties uz lietotāja preferencēm
  }).format(price);

  return <p>{formattedPrice}</p>
}

7. No labās uz kreiso pusi (RTL) rakstāmās valodas

Ja jūsu lietotnei ir jāatbalsta tādas valodas kā arābu vai ivrits (RTL valodas), izstrādājiet savu izkārtojumu, lai to pielāgotu. Apsveriet iespēju izmantot CSS īpašības, piemēram, `direction: rtl;`, un pielāgot UI elementu pozicionēšanu.

8. Satura piegādes tīkli (CDN) un veiktspēja

Izmantojiet CDN, lai pasniegtu savas lietotnes statiskos resursus (attēlus, CSS, JavaScript) no serveriem, kas atrodas ģeogrāfiski tuvāk jūsu lietotājiem. Tas samazina latentumu un uzlabo lapu ielādes laiku starptautiskiem lietotājiem. Next.js iebūvētā attēlu optimizācija un CDN integrācija var ievērojami uzlabot veiktspēju.

9. SEO optimizācija globālajiem tirgiem

Meklētājprogrammu optimizācija (SEO) ir ļoti svarīga, lai piesaistītu lietotājus visā pasaulē. Izmantojiet šādas tehnikas:

hreflang tagu piemērs jūsu `Layout` komponentes `` sadaļā:


<Head>
  <title>{t('layout.title', { title })}</title>
  <meta name="description" content={t('layout.description')} />
  <link rel="alternate" href="https://www.example.com/" hreflang="x-default" />  {
  <link rel="alternate" href="https://www.example.com/en/" hreflang="en" />
  <link rel="alternate" href="https://www.example.com/fr/" hreflang="fr" />
  // Vairāki valodu varianti
</Head>

Paplašinātas izkārtojuma stratēģijas

1. Koda sadalīšana ar izkārtojumiem

Next.js automātiski veic koda sadalīšanu, lai uzlabotu veiktspēju, bet jūs varat precīzi noregulēt šo darbību, izmantojot dinamiskus importus, īpaši savos izkārtojumos. Dinamiski importējot lielākas komponentes, jūs varat samazināt sākotnējo JavaScript pakotnes izmēru, kas nodrošina ātrāku sākotnējo ielādes laiku.


import dynamic from 'next/dynamic';

const DynamicComponent = dynamic(() => import('../components/LargeComponent'));

function Layout({ children }) {
  return (
    <>
      <header>...</header>
      <main>
        {children}
        <DynamicComponent />  <!-- Dinamiski ielādēta komponente -->
      </main>
      <footer>...</footer>
    </>
  );
}

Piemērā `LargeComponent` tiek ielādēta dinamiski. Dinamiskais imports aizkavē šīs komponentes lejupielādi, līdz tā patiešām ir nepieciešama.

2. Izkārtojumi ar servera puses renderēšanu (SSR)

Next.js SSR iespējas ļauj jums iepriekš renderēt saturu serverī, uzlabojot SEO un sākotnējo ielādes laiku. Jūs varat ieviest SSR savos izkārtojumos, lai ielādētu datus, pirms lapa tiek piegādāta klientam. Tas ir īpaši svarīgi saturam, kas bieži mainās vai kam jābūt indeksētam meklētājprogrammās.

Izmantojot `getServerSideProps` lapas iekšienē, jūs varat nodot datus izkārtojumam:


// pages/posts/[id].js
import Layout from '../../components/Layout';

export async function getServerSideProps(context) {
  const { id } = context.params;
  const res = await fetch(`https://api.example.com/posts/${id}`);
  const post = await res.json();

  return {
    props: {
      post,
    },
  };
}

function PostPage({ post }) {
  return (
    <Layout title={post.title}>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </Layout>
  );
}

export default PostPage;

Funkcija `getServerSideProps` ielādē ziņas datus. Pēc tam `post` dati tiek nodoti kā rekvizīts `Layout` komponentei.

3. Izkārtojumi ar statiskās vietnes ģenerēšanu (SSG)

Saturam, kas nemainās bieži, SSG nodrošina ievērojamas veiktspējas priekšrocības. Tā iepriekš renderē lapas būvēšanas laikā, ģenerējot statiskus HTML failus, kas tiek pasniegti tieši lietotājam. Lai izmantotu SSG, ieviesiet `getStaticProps` funkciju savās lapu komponentēs, un datus var nodot izkārtojumam.


// pages/about.js
import Layout from '../components/Layout';

export async function getStaticProps() {
  const aboutData = { title: 'Par mums', content: 'Informācija par mūsu uzņēmumu.' };
  return {
    props: {
      aboutData,
    },
  };
}

function AboutPage({ aboutData }) {
  return (
    <Layout title={aboutData.title}>
      <h2>{aboutData.title}</h2>
      <p>{aboutData.content}</p>
    </Layout>
  );
}

export default AboutPage;

Šajā SSG piemērā `getStaticProps` ielādē datus būvēšanas laikā un pēc tam nodod tos `AboutPage`, kas tiek renderēta, izmantojot `Layout` komponenti.

4. Ligzdoti izkārtojumi

Sarežģītām lietotnēm var būt nepieciešami ligzdoti izkārtojumi. Tas nozīmē, ka izkārtojumi atrodas citos izkārtojumos. Piemēram, jums varētu būt galvenais lietotnes izkārtojums un pēc tam izmantot dažādus izkārtojumus konkrētām jūsu vietnes sadaļām. Tas nodrošina smalku kontroli pār lietotāja saskarni.


// komponentes/MainLayout.js
function MainLayout({ children }) {
  return (
    <>
      <header>Galvenā galvene</header>
      <main>{children}</main>
      <footer>Galvenā kājene</footer>
    </>
  );
}

export default MainLayout;


// komponentes/SectionLayout.js
function SectionLayout({ children }) {
  return (
    <div className="section-wrapper">
      <aside>Sadaļas navigācija</aside>
      <div className="section-content">{children}</div>
    </div>
  );
}

export default SectionLayout;


// pages/section/[page].js
import MainLayout from '../../components/MainLayout';
import SectionLayout from '../../components/SectionLayout';

function SectionPage({ page }) {
  return (
    <MainLayout>
      <SectionLayout>
        <h1>Sadaļas lapa: {page}</h1>
        <p>Sadaļas lapas {page} saturs.</p>
      </SectionLayout>
    </MainLayout>
  );
}

export async function getServerSideProps(context) {
  const { page } = context.query;
  return {
    props: {
      page,
    },
  };
}

export default SectionPage;

Šajā gadījumā `SectionPage` ir ietverta gan `MainLayout`, gan `SectionLayout`, lai izveidotu ligzdotu izkārtojuma struktūru.

Labākā prakse un optimizācijas padomi

1. Komponenšu kompozīcija

Izmantojiet komponenšu kompozīciju. Sadaliet savus izkārtojumus un UI elementus mazākās, atkārtoti lietojamās komponentēs. Tas uzlabo koda lasāmību un uzturamību.

2. Veiktspējas uzraudzība

Nepārtraukti uzraugiet savu izkārtojumu un lietotnes veiktspēju, izmantojot tādus rīkus kā Google Lighthouse vai WebPageTest. Šie rīki var palīdzēt jums identificēt veiktspējas vājās vietas un optimizācijas jomas.

3. Kešatmiņas stratēģijas

Ieviesiet kešatmiņas stratēģijas, lai samazinātu servera slodzi un uzlabotu atbildes laiku. Apsveriet bieži piekļūstamu datu kešošanu, pārlūkprogrammas kešatmiņas izmantošanu statiskiem resursiem un satura piegādes tīkla (CDN) ieviešanu, lai kešotu saturu tuvāk lietotājam.

4. Slinkā ielāde (Lazy Loading)

Izmantojiet slinko ielādi attēliem un citām nekritiskām komponentēm. Šī pieeja aizkavē resursu ielādi, līdz tie ir nepieciešami, samazinot sākotnējo lapas ielādes laiku.

5. Izvairieties no pārmērīgām pārrenderēšanām

Optimizējiet savas komponentes, lai izvairītos no nevajadzīgām pārrenderēšanām. Izmantojiet `React.memo`, `useMemo` un `useCallback`, lai memoizētu komponentes un funkcijas. Pareizi izmantojiet `key` rekvizītu, renderējot komponenšu sarakstus, lai palīdzētu React efektīvi identificēt izmaiņas.

6. Testēšana

Ieviesiet rūpīgu savu izkārtojuma komponenšu testēšanu, ieskaitot vienības testus un integrācijas testus, lai nodrošinātu, ka tās darbojas kā paredzēts un saglabā konsekventu uzvedību. Testējiet izkārtojumus dažādos ekrāna izmēros un lokalizācijās.

Noslēgums

Next.js izkārtojumi piedāvā jaudīgus un daudzpusīgus rīkus, lai veidotu izcilas tīmekļa lietotnes. Apgūstot šajā rokasgrāmatā apspriestās tehnikas, jūs varat izveidot labi strukturētas, uzturamas un veiktspējīgas lietotāja saskarnes. Atcerieties ievērot internacionalizācijas un globalizācijas labāko praksi, lai nodrošinātu, ka jūsu lietotne rezonē ar globālu auditoriju. Apvienojot Next.js spēku ar pārdomātu pieeju izkārtojumiem, jūs būsiet labi aprīkots, lai radītu modernas, mērogojamas un universāli pieejamas tīmekļa pieredzes.

Next.js izkārtojumi: koplietojamu lietotāja saskarnes (UI) komponenšu modeļu apgūšana globālām lietotnēm | MLOG